<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>总监控</title>
    <link href="/css/style.css" type="text/css" rel="stylesheet">
    <link href="/css/monitor.css" type="text/css" rel="stylesheet">
    <link rel="stylesheet" href="/css/layui.css" media="all">

    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/style.js"></script>
    <script type="text/javascript" src="/js/layer.js"></script>
    <script type="text/javascript" src="/js/echarts.min.js"></script>
    <script src="http://www.w3school.com.cn/jquery/jquery.js" type="text/javascript"></script>
    <script src="https://translate.google.cn/translate_a/element.js?cb=googleTranslateElementInit"></script>

    <!--[if lte IE 8]>
    <link rel="stylesheet" type="text/css" href="css/ie.css"/>
    <![endif]-->
    <!--[if lte IE 9]>
    <script>
        alert("您正在使用的浏览器版本过低，为了您的最佳体验，请先升级浏览器。");
        window.location.href = "http://support.dmeng.net/upgrade-your-browser.html?referrer=" + encodeURIComponent(window.location.href);
    </script>
    <![endif]-->
    <style>
        .layer-anim {
            border-radius: 8px;
        }

        .layui-layer {
            background: #fff;
            box-shadow: none;
            border-radius: 8px;
        }

        .layui-layer-page .layui-layer-content {
            border-radius: 8px;
            overflow: visible;
        }

        #lay01 {
            position: relative;
        }

        .messBox .mesTitle {
            height: 50px;
            line-height: 50px;
            padding-left: 25px;
            background: #262829;
            font-size: 16px;
            color: #A4ACB1;
        }

        .messBox .mesCont h3 {
            height: 30px;
            line-height: 30px;
            padding-left: 27px;
            background: #D9E6F8;
            font-size: 12px;
            color: #61696E;
        }

        .messBox .mesCont h4 {
            font-size: 16px;
            font-weight: normal;
            color: #666;
            text-indent: 2em;
            line-height: 80px;
        }

        .messBox .mesCont h4 img {
            margin-right: 0.5em;
        }

        .messBox .contentButton {
            width: 100%;
            text-align: right;
            background: #F3F5F7;
            padding: 12px 0px;
            position: absolute;
            bottom: 0;
        }

        .messBox input {
            width: 96px;
            height: 36px;
            margin-left: 10px;
            color: #5AAFFF;
            cursor: pointer;
            font-size: 14px;
            border: 1px solid #5AAFFF;
            background: none;
            border-radius: 4px;
            margin-right: 10px;
        }

        .messBox input:hover {
            background: rgba(90, 175, 255, 0.19);
        }

        .messBox input.input_act:hover {
            background: rgba(90, 175, 255, 0.8);
        }

        .messBox input.input_act {
            background: #5AAFFF;
            color: #fff;
        }

        .messBox table {
            width: 82%;
            margin: 40px auto 0;
            line-height: 40px;
            font-size: 14px;
        }

        .messBox table textarea {
            margin-top: 10px;
            width: 100%;
            height: 12em;
            text-indent: 1em;
        }

        .messBox table td em {
            color: rgba(255, 59, 63, 1.00);
            margin-right: 2px;
        }

        .messBox table td b {
            margin-left: 20px;
            display: inline-block;
            color: #666;
            border: 1px solid #999;
            line-height: 1.88;
            padding: 0px 12px;
            font-weight: normal;
            border-radius: 4px;
        }

        .messBox table td b:hover {
            color: #0091FD;
            border: 1px solid #0091FD;
        }

        .drop_boxx {
            float: right;
        }

        .drop_boxx .drop_top {
            width: 100px;
            padding-left: 15px;
            height: 32px;
            line-height: 34px;
            position: relative;
            border-color: #fff;
            font-size: 14px;
            color: #252729;
            background: #F3F5F7 url(/crm/images/kq/jian.png) no-repeat 96px center;
            margin-left: 0;
            cursor: pointer;
            border: 1px solid #e2e2e2;
        }

        .drop_boxx {
            position: relative;
            z-index: 20;
        }

        .drop_boxx .drop_top_def {
            background: #fff url(/crm/images/kq/jian.png) no-repeat 96px center;
            border: 1px solid #ddd;
            border-bottom: none;
        }

        .drop_boxx .drop_cont {
            display: none;
            position: absolute;
            left: 0;
            top: 36px;
            z-index: 9999;
        }

        .drop_boxx .drop_cont ul {
            border: 1px solid #ddd;
            border-top: none;
        }

        .drop_boxx .drop_cont li {
            height: 34px;
            line-height: 34px;
            background: #ffffff;
            width: 100px;
            float: inherit;
            margin: 0;
            padding-left: 15px;
            cursor: pointer;
        }

        .drop_boxx .drop_cont li:hover {
            background: #5aaffe;
            color: #ffffff;
        }

        .drop_boxx input {
            width: 150px;
            height: 32px;
            line-height: 34px;
            padding: 0px;
            background: #fff;
            padding-left: 10px;
            font-size: 14px;
            border: 1px solid #e2e2e2;
            border-left: none;
        }

        .drop_boxx b {
            float: left;
            display: block;
            width: 34px;
            height: 34px;
            line-height: 34px;
            color: #fff;
            font-size: 14px;
            text-align: center;
            background: url(/crm/images/kq/search.png) no-repeat 9px 9px #B6C2C9;
            cursor: pointer;
        }


        .main_grant .tablecont .table_box_gt td {
            padding: 0px 0;
        }

        .aside .aside_iner li a {
            display: inline-block;
            line-height: 38px;
            width: 100%;
            height: auto;
            margin-left: -25px;
        }

        .aside .aside_iner h2 > a {
            width: 100%;
            height: auto;
            display: block;
        }

        .box .btm_cont .art_box_two .td_col {
            color: #eba703;
        }

        .botm .box .art_box_two .tab_list {
            color: #fff;
            line-height: 2.6;
        }
    </style>

    <style>
        body, html {
            height: 100%;
            min-width: 1600px;
            overflow: hidden;
        }

        ::-webkit-scrollbar {
            height: 10px;
            overflow: visible;
            width: 6px;
        }

        ::-webkit-scrollbar-corner {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            border-radius: 5px;
            background-color: #033b70;
            background-clip: padding-box;
            border: 1px solid #03437a;
            border-width: 1px;
            min-height: 28px;
            max-height: 100px;
            padding: 10px 0 0;
            box-shadow: inset 0 0 2px hsla(0, 0%, 100%, .25);
        }

        ::-moz-scrollbar {
            height: 10px;
            overflow: visible;
            width: 6px;
        }

        ::-moz-scrollbar-corner {
            background: transparent;
        }

        ::-moz-scrollbar-thumb {
            border-radius: 5px;
            background-color: #033b70;
            background-clip: padding-box;
            border: 1px solid #03437a;
            border-width: 1px;
            min-height: 28px;
            max-height: 100px;
            padding: 10px 0 0;
            box-shadow: inset 0 0 2px hsla(0, 0%, 100%, .25);
        }

        .header .layui-nav {
            position: absolute;
            right: 0;
            top: 0;
            padding: 0;
            background: none;
        }
    </style>
    <script>
        $(function () {
            $(".box .btm_cont.jrtj  .h5:eq(1)").hide();
            $(".box .btm_cont.jrtj .tab_two a").each(function (i) {
                $(this).hover(function () {
                    $(this).addClass("a_act").siblings("a").removeClass("a_act");
                    $(".box .btm_cont.jrtj .tab_box:eq(" + i + ")").show().siblings(".tab_box").hide();
                    $(".box .btm_cont.jrtj  .h5:eq(" + i + ")").show().siblings(".h5").hide();
                })
            });

            $(".box .btm_cont.qtyj .tab_two a").each(function (i) {
                $(this).hover(function () {
                    $(this).addClass("a_act").siblings("a").removeClass("a_act");
                    $(".box .btm_cont.qtyj .art_box_two:eq(" + i + ")").show().siblings(".art_box_two").hide();
                })
            });
        });

        /**
         * JS获取本地经纬度
         */
        function getPosition() {
            return new Promise((resolve, reject) => {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(function (position) {
                        let latitude = position.coords.latitude
                        let longitude = position.coords.longitude
                        let data = {
                            longitude: longitude,
                            latitude: latitude
                        }
                        resolve(data)
                    }, function () {
                        reject(arguments)
                    })
                } else {
                    reject('你的浏览器不支持当前地理位置信息获取')
                }
            })
        }

        let map;

        function map_init() {
            $("#daeraNum").html("场所数：<em>" + 5 + "</em>");
            $("#equNum").html("设备总数：<em>"+10+"</em>");
            $("#outLineNum").html("离线设备：<em>"+2+"</em>");
            $("#personNum").html("常住人员：<em>" + 150 + "</em>");

            /* var outLineNum = 0;
                    if(data.outLineNum != undefined){
                        outLineNum = data.outLineNum;
                    } */
            map = new BMap.Map("map");

            //第1步：设置地图中心点
            var point = new BMap.Point(100, 200);
            // var point = new BMap.Point(getPosition);
            //第2步：初始化地图,设置中心点坐标和地图级别。
            map.centerAndZoom(point, 13);
            //第3步：启用滚轮放大缩小
            map.enableScrollWheelZoom(true);
            //第4步：向地图中添加缩放控件
            var ctrlNav = new window.BMap.NavigationControl({
                anchor: BMAP_ANCHOR_TOP_LEFT,
                type: BMAP_NAVIGATION_CONTROL_LARGE
            });
            map.addControl(ctrlNav);
            //第5步：向地图中添加缩略图控件
            var ctrlOve = new window.BMap.OverviewMapControl({
                anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
                isOpen: 1
            });
            map.addControl(ctrlOve);

            //第6步：向地图中添加比例尺控件
            var ctrlSca = new window.BMap.ScaleControl({
                anchor: BMAP_ANCHOR_BOTTOM_LEFT
            });
            map.addControl(ctrlSca);

            //for (var i = 0; i < data.listMap.length; i++) {
                //if (data.listMap[i].azjd != undefined && data.listMap[i].azwd != undefined) {
                    var p0 = 15;
                    var p1 = 30;
                    var poi = {'title': "门禁", 'address': "山东烟台莱山"};
                    var maker = addMarker(new window.BMap.Point(p0, p1), 2);// i+1点位数值
                    addInfoWindow(maker, poi, i + 1);


            var poi2 = {'title': "门禁22", 'address': "山东烟台福山区1223"};
            var maker = addMarker(new window.BMap.Point(30, 69), 2);// i+1点位数值
            addInfoWindow(maker, poi2, i + 1);
                //}
            //  }



            /*$.ajax({
                url: '/crm/total/monitor/ajaxListEquip',
                type: "POST",
                dataType: 'json',
                async: false,
                data: {},
                success: function (data) {
                    /!* var outLineNum = 0;
                    if(data.outLineNum != undefined){
                        outLineNum = data.outLineNum;
                    } *!/
                    $("#daeraNum").html("场所数：<em>" + data.daeraNum + "</em>");
                    /!* $("#equNum").html("设备总数：<em>"+data.equNum+"</em>"); *!/
                    /!* $("#outLineNum").html("离线设备：<em>"+outLineNum+"</em>"); *!/
                    $("#personNum").html("常住人员：<em>" + data.personNum + "</em>");
                    map = new BMap.Map("map");

                    //第1步：设置地图中心点
                    var point = new BMap.Point(data.Xlatitude, data.Ylongitude);
                    // var point = new BMap.Point(getPosition);
                    //第2步：初始化地图,设置中心点坐标和地图级别。
                    map.centerAndZoom(point, 13);
                    //第3步：启用滚轮放大缩小
                    map.enableScrollWheelZoom(true);
                    //第4步：向地图中添加缩放控件
                    var ctrlNav = new window.BMap.NavigationControl({
                        anchor: BMAP_ANCHOR_TOP_LEFT,
                        type: BMAP_NAVIGATION_CONTROL_LARGE
                    });
                    map.addControl(ctrlNav);
                    //第5步：向地图中添加缩略图控件
                    var ctrlOve = new window.BMap.OverviewMapControl({
                        anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
                        isOpen: 1
                    });
                    map.addControl(ctrlOve);

                    //第6步：向地图中添加比例尺控件
                    var ctrlSca = new window.BMap.ScaleControl({
                        anchor: BMAP_ANCHOR_BOTTOM_LEFT
                    });
                    map.addControl(ctrlSca);

                    for (var i = 0; i < data.listMap.length; i++) {
                        if (data.listMap[i].azjd != undefined && data.listMap[i].azwd != undefined) {
                            var p0 = data.listMap[i].azjd;
                            var p1 = data.listMap[i].azwd;
                            var poi = {'title': data.listMap[i].dareaname, 'address': data.listMap[i].snh};
                            var maker = addMarker(new window.BMap.Point(p0, p1), data.listMap[i].nums);// i+1点位数值
                            addInfoWindow(maker, poi, i + 1);
                        }
                    }
                },
                error: function (data) {
                    layer.msg("未请求到数据", {time: 1000, skin: 'layui-layer-molv', icon: 7});
                }
            });*/
        }

        // 添加标注
        /* function addMarker(point, index) {
            var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",
                new BMap.Size(23, 25), {
                    offset: new BMap.Size(10, 25),
                    imageOffset: new BMap.Size(0, 0 - index * 25)
                });
            var marker = new BMap.Marker(point, { icon: myIcon });
            map.addOverlay(marker);
            return marker;
        }   */
        function addMarker(point, index) {
            var marker = new BMap.Marker(point);
            var label = new BMap.Label(index, {
                offset: new BMap.Size(3, 2)
            });
            label.setStyle({
                background: 'none', color: '#fff', border: 'none'
            });
            marker.setLabel(label);
            map.addOverlay(marker);
            return marker;
        }

        // 添加信息窗口
        function addInfoWindow(marker, poi) {
            //pop弹窗标题
            let title = '<div style="font-weight:bold;color:#CE5521;font-size:14px">' + poi.title + '</div>';
            //pop弹窗信息
            let html = [];
            html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>');
            html.push('<tr>');
            html.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">设备:</td>');
            html.push('<td style="vertical-align:top;line-height:16px">' + poi.address + ' </td>');
            html.push('</tr>');
            html.push('</tbody></table>');
            let infoWindow = new BMap.InfoWindow(html.join(""), {title: title, width: 200});

            let openInfoWinFun = function () {
                marker.openInfoWindow(infoWindow);
            };
            marker.addEventListener("click", openInfoWinFun);
            return openInfoWinFun;
        }

        //异步调用百度js
        function map_load() {
            let load = document.createElement("script");
            load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init";
            document.body.appendChild(load);
        }

        window.onload = map_load;

        /**
         * 显示时间
         */
        function getTime() {
            let mydate = new Date();
            let myddy = mydate.getDay();
            let time = format(mydate);
            let weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
            $(".showDate").html(time + '&nbsp;&nbsp;' + weekday[myddy]); //将值赋给div
        }

        $(function () {
            setInterval("getTime();", 1000);//显示时间
            //人员今日统计数据
            // setTimeout(function () {
            //     setInterval(piechartDataRedis, 5000);
            // }, 1000);
            //车辆今日统计数据
            // setTimeout(function () {
            //     setInterval(piechartCarDataRedis, 50000);
            // }, 2000);

            /*setTimeout(function () {
                setInterval("personWarnList();", 5000);//人员预警信息列表
            }, 4000);
            setTimeout(function () {
                setInterval("init_echarts();", 5000);//分类统计
            }, 5000);*/
        });

        // setTimeout(function () {
        //     init_echarts();//分类统计
        // }, 10000);

        function reload() {
            //window.location.reload();
        }


        // setTimeout(function () {
        //     historicalStatisticsRanking();//各区历史统计数据排行
        // }, 1000);
        // setTimeout(function () {
        //     sevenDayTraffic();//近七日通行流量
        // }, 3000);
    </script>
</head>

<body style="background: url(/images/total_bg.png) no-repeat; background-size:100% 100%;">

<div class="header">
    <em id="showDate"><img src="/images/time_icon.png"><a style="color:#2c9eff;" class="showDate"></a></em>

    <ul class="layui-nav">
        <li class="layui-nav-item">
            <a href="/crm/account/main?ifarmUrl=dataQuery/visitLog/toList">管理控制台</a>
            <dl class="layui-nav-child">
                <dd><a href="/crm/account/main?ifarmUrl=dataQuery/visitLog/toList">人行记录</a></dd>
                <dd><a href="/crm/account/main?ifarmUrl=user/employee/list">人员管理</a></dd>
                <dd><a href="/crm/nPassRecord/toList">人员监控</a></dd>
                <dd><a href="/crm/vehicleMonitoring/toTrafficMonitoringPage">车辆监控</a></dd>

            </dl>
        </li>
    </ul>
    <div class="wrap"><p>山东威尔数据股份有限公司安全化智能云平台 &nbsp;&mdash;&nbsp; 总监控</p></div>
</div>
<script type="text/javascript">
    function piechartDataRedis() {
        var myChart = echarts.init(document.getElementById('today_class'));
        option = {

            title: {
                subtext: '',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                data: ['少数民族', '内部人员', '预警', '陌生人'],
                textStyle: {
                    color: "#027ab7"
                },
                bottom: 10,
                left: 'center',
            },

            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '60%',
                    center: ['50%', '40%'],
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                var colorList = ['#00a1e4', '#ffd900', '#24c768', '#ff7e00'];
                                return colorList[params.dataIndex]
                            },
                        }
                    },
                    data: [{value: 10, name: '少数民族'}, {value: 150, name: '内部人员'},
                        {value: 3, name: '预警'}, {value: 60, name: '陌生人'}],
                    label: {
                        normal: {
                            formatter: ['{b}', ' ({c})'].join(''),

                        }
                    },
                }
            ]
        };
        myChart.setOption(option);
        /*$.ajax({
            url: '/crm/person/record/totalClassRedis',
            type: "POST",
            dataType: 'json',
            async: false,
            data: {},
            success: function (data) {
                var map = data.nowDayRecords;
                var num = map.minitorys + map.employeeNum + map.alarmsNum + map.visitorsNum;
                $("#visit_num").html('访问总数量：<em>' + num + '</em>');
                var myChart = echarts.init(document.getElementById('today_class'));
                option = {

                    title: {
                        subtext: '',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        data: ['少数民族', '内部人员', '预警', '陌生人'],
                        textStyle: {
                            color: "#027ab7"
                        },
                        bottom: 10,
                        left: 'center',
                    },

                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '60%',
                            center: ['50%', '40%'],
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        var colorList = ['#00a1e4', '#ffd900', '#24c768', '#ff7e00'];
                                        return colorList[params.dataIndex]
                                    },
                                }
                            },
                            data: [{value: map.minitorys, name: '少数民族'}, {value: map.employeeNum, name: '内部人员'},
                                {value: map.alarmsNum, name: '预警'}, {value: map.visitorsNum, name: '陌生人'}],
                            label: {
                                normal: {
                                    formatter: ['{b}', ' ({c})'].join(''),

                                }
                            },
                        }
                    ]
                };
                myChart.setOption(option);
            },
            error: function (data) {
                layer.msg("未请求到数据", {time: 1000, skin: 'layui-layer-molv', icon: 7});
            }
        });*/
    }

    function piechartCarDataRedis() {
        var myChart = echarts.init(document.getElementById('today_class_car'));
        option = {

            title: {
                subtext: '',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                data: ['非车主', '内部车辆', '预警', '外部车辆'],
                textStyle: {
                    color: "#027ab7"
                },
                bottom: 10,
                left: 'center',
            },

            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '60%',
                    center: ['50%', '40%'],
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                var colorList = [
                                    '#00a1e4', '#ffd900', '#24c768', '#ff7e00'
                                ];
                                return colorList[params.dataIndex]
                            },
                        }
                    },
                    data: [
                        {value: 20, name: '非车主'},
                        {value: 160, name: '内部车辆'},
                        {value: 3, name: '预警'},
                        {value: 70, name: '外部车辆'}
                    ],
                    label: {
                        normal: {
                            formatter: ['{b}', ' ({c})'].join(''),

                        }
                    },
                }
            ]
        };
        myChart.setOption(option);


        /*$.ajax({
            url: '/crm/inspect/vehicleVerificationRecords/totalClassRedis',
            type: "POST",
            dataType: 'json',
            async: false,
            data: {},
            success: function (data) {
                var map = data.nowDayRecords;
                var num = map.minitorys + map.employeeNum + map.alarmsNum + map.visitorsNum;
                $("#visit_num_car").html('访问总数量：<em>' + num + '</em>');
                var myChart = echarts.init(document.getElementById('today_class_car'));
                option = {

                    title: {
                        subtext: '',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        data: ['非车主', '内部车辆', '预警', '外部车辆'],
                        textStyle: {
                            color: "#027ab7"
                        },
                        bottom: 10,
                        left: 'center',
                    },

                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '60%',
                            center: ['50%', '40%'],
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        var colorList = [
                                            '#00a1e4', '#ffd900', '#24c768', '#ff7e00'
                                        ];
                                        return colorList[params.dataIndex]
                                    },
                                }
                            },
                            data: [
                                {value: map.minitorys, name: '非车主'},
                                {value: map.employeeNum, name: '内部车辆'},
                                {value: map.alarmsNum, name: '预警'},
                                {value: map.visitorsNum, name: '外部车辆'}
                            ],
                            label: {
                                normal: {
                                    formatter: ['{b}', ' ({c})'].join(''),

                                }
                            },
                        }
                    ]
                };
                myChart.setOption(option);
            },
            error: function (data) {
                layer.msg("未请求到数据", {time: 1000, skin: 'layui-layer-molv', icon: 7});
            }
        });*/
    }

    $(function () {
        piechartDataRedis();
        piechartCarDataRedis();
    })
    $(function () {
        /* $.ajax({
            url: '



        //
        /crm/inspect/vehicleVerificationRecords/totalClassRedis',
	        type: "POST",
	        dataType: 'json',
	        async: false,
	        data:{},
	        success: function (data) {
	        	var myChart = echarts.init(document.getElementById('today_class_car'));
	        	option = {
	        		    title : {
	        		        subtext: '',
	        		        x:'center'
	        		    },
	        		    tooltip : {
	        		        trigger: 'item',
	        		        formatter: "{a} <br/>{b} : {c} ({d}%)"
	        		    },
	        		    legend: {
	        		    	bottom: 10,
					        left: 'center',
	        		        data: ['内部车辆','预警'],
	        		        textStyle: {
					            color: "#027ab7"
					        }
	        		    },
	        		    series : [
	        		        {
	        		            name: '访问来源',
	        		            type: 'pie',
	        		            radius : '60%',
	        		            center: ['50%', '40%'],
	        		            data:[
	        		            	{value:0, name:'内部车辆'},
					                {value:0, name:'预警'}
	        		            ],
	        		            label: {
	    	        	            normal: {
	    	        	                formatter: ['{b}', ' ({c})'].join(''),
	    	        	            }
	    	        	        },
	        		            itemStyle: {
				                    normal: {
				                        color: function(params) {
				                            var colorList = [
				                              '#00a1e4','#ffd900'
				                            ];
				                            return colorList[params.dataIndex]
				                        },
				                    }
				                },
	        		        }
	        		    ]
	        		};
				myChart.setOption(option);
	        },
	        error: function (data) {
	            alert("请求失败");
	        }
	    }); */
    })
</script>
<div class="botm botm_total">
    <div class="box botm_lf">
        <div class="btm_space"></div>
        <div class="title_space">今日统计数据</div>
        <div class="btm_cont jrtj">
            <input type="hidden" value="15165703100" id="username"/>
            <div class="tab_two"><a class="a_act" href="#">人员</a> <a href="#">车辆</a></div>
            <h5 id="visit_num" class="h5">访问总数量：<em>0</em></h5>
            <h5 id="visit_num_car" class="h5">访问总数量：<em>0</em></h5>
            <div class="tab_box" id="today_class">

            </div>
            <div class="tab_box" id="today_class_car">

            </div>
        </div>
        <div class="btm_space"></div>
        <div class="title_space"><!-- 今日 -->各区历史统计数据排行</div>
        <div class="btm_cont jrtj">
            <div class="tab_two" style="margin-bottom:10px;"><a class="a_act" href="#">人员统计排行</a> <a href="#">车辆统计排行</a>
            </div>
            <h5><span style="width:14%">序号</span><span style="width:46%">辖区名称</span><span
                    style="width:20%">访问数量</span><span style="width:20%">预警数量</span></h5>
            <div class="tab_box tab_box02">
                <table width="100%" border="0" class="tab_list tab_list_yj">
                    <tbody id="person_total">
                    <tr>
                        <td class="td_col">1</td>
                        <td width="46%">乌鲁木齐市新市区和兴嘉苑小区</td>
                        <td width="20%">1211396</td>
                        <td width="20%">0</td>
                    </tr>
                    <tr>
                        <td class="td_col">2</td>
                        <td width="46%">乌鲁木齐新市区地调处小区</td>
                        <td width="20%">1019948</td>
                        <td width="20%">0</td>
                    </tr>
                    <tr>
                        <td class="td_col">3</td>
                        <td width="46%">塔城和布克赛尔江格尔农贸市场</td>
                        <td width="20%">864424</td>
                        <td width="20%">0</td>
                    </tr>
                    <tr>
                        <td class="td_col">4</td>
                        <td width="46%">阿克苏幸福城一期</td>
                        <td width="20%">510316</td>
                        <td width="20%">0</td>
                    </tr>
                    <tr>
                        <td class="td_col">5</td>
                        <td width="46%">新疆新东方池嘉昊物业服务有限公...</td>
                        <td width="20%">494704</td>
                        <td width="20%">0</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="tab_box tab_box02">
                <table width="100%" border="0" class="tab_list tab_list_yj">
                    <tbody id="car_total">
                    <tr>
                        <td class="td_col">1</td>
                        <td width="46%">乌鲁木齐市新市区和兴嘉苑小区</td>
                        <td width="20%">590250</td>
                        <td width="20%">0</td>
                    </tr>
                    <tr>
                        <td class="td_col">2</td>
                        <td width="46%">乌鲁木齐市新市区和兴润园小区</td>
                        <td width="20%">385426</td>
                        <td width="20%">0</td>
                    </tr>
                    <tr>
                        <td class="td_col">3</td>
                        <td width="46%">伊犁尼勒克县幸福佳苑三期</td>
                        <td width="20%">252296</td>
                        <td width="20%">0</td>
                    </tr>
                    <tr>
                        <td class="td_col">4</td>
                        <td width="46%">伊犁尼勒克县马场小区</td>
                        <td width="20%">214945</td>
                        <td width="20%">0</td>
                    </tr>
                    <tr>
                        <td class="td_col">5</td>
                        <td width="46%">伊犁尼勒克县幸福佳苑二期</td>
                        <td width="20%">172890</td>
                        <td width="20%">0</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="box botm_cen">
        <div class="btm_space"></div>
        <div class="btm_cont dt">
            <div id="map" style="height: 100%;">
            </div>
            <div class="dt_tip">
                <span id="daeraNum">场所数：<em>0</em></span>
                <a onclick="terminalList('');"><span id="equNum">设备总数：<em>0</em></span></a>
                <a onclick="terminalList(7);"><span id="onLineNum">在线设备：<em>0</em></span></a>
                <a onclick="terminalList(6);"><span id="outLineNum">离线设备：<em>0</em></span></a>
                <span id="personNum">常住人员：<em>0</em></span>
            </div>
            <!-- <input type="hidden" id="onlineValue"/> -->
        </div>
        <div class="btm_space"></div>
        <div class="title_space">近七日通行流量</div>
        <div class="btm_cont qtyj">
            <div class="cont_more"><span style="background:#24c768;"></span>人员 <span style="background:#00d2ff;"></span>车辆
            </div>
            <div class="art_box" style=" overflow:hidden;" id="week_pass">

            </div>
        </div>
    </div>
    <script type="text/javascript">

        function cancel() {
            layer.closeAll();
        }

        /*function queryDeviceState(flag) {
            location.href = "/crm/account/main?ifarmUrl=terminal/terminalEquipment/analysis?flag=" + flag;
        }*/

        function terminalList(syzt) {
            location.href = "/crm/account/main?ifarmUrl=terminal/terminalEquipment/toList?syzt=" + syzt;
        }

        function online() {
            var value = $("#onlineValue").val();
            $.ajax({
                url: '/crm/total/monitor/getPassTotalByAreaCode',
                type: "POST",
                dataType: 'json',
                async: false,
                data: {},
                success: function (data) {
                    if (data.success == 1) {
                        var list = data.list;
                        if (list != undefined && value != undefined && value != "") {
                            var arr = value.split(",");
                            var str = '';
                            for (var j = 0; j < arr.length; j++) {
                                for (var i = 0; i < list.length; i++) {
                                    if (arr[j] == list[i].snh) {
                                        var position = '暂无';
                                        if (list[i].position != undefined) {
                                            position = list[i].position;
                                        }
                                        str += '<tr><td>' + list[i].snh + '</td><td>' + list[i].model + '</td><td>' + position + '</td><td><a>' + list[i].total + '</a></td></tr>';
                                    }
                                }
                            }
                            layer.open({
                                type: 1,
                                id: ['lay02'],
                                title: false,
                                closeBtn: 1,
                                content: '<div class="messBox"><div class="mesTitle">设备在线统计</div><div class="mesCont"><table border="0"><tbody><tr><td>设备序列号</td><td>型号</td><td>地址</td><td>当日通行量</td></tr>' + str + '</tbody></table><div style="text-align: right;margin-right: 60px;"></div><div class="contentButton"><input type="button" value="取消" onclick="cancel()"></div></div>',
                                area: ['600px', '320px'],
                                shade: 0.56,
                                anim: 1,//动画类型
                                closeBtn: 1 //不显示关闭按钮
                            });
                        } else {
                            // alert("暂无内容")
                        }
                    }
                },
                error: function (data) {
                    layer.msg("未请求到数据", {time: 1000, skin: 'layui-layer-molv', icon: 7});
                }
            });
        }

        $(function () {
            var username = $("#username").val();
            if (username == "test") {
                init_echarts1();
            } else {
                init_echarts();
            }
            //queryEquipState();
            queryDeviceState();
        })

        function queryEquipState() {
            $.ajax({
                url: '/crm/total/monitor/queryEquipState',
                type: "POST",
                dataType: 'json',
                async: false,
                data: {},
                success: function (data) {
                    if (data.success == 1) {
                        if (data.total != undefined && data.online != undefined) {
                            var total = data.total.length;
                            var online = data.online.length;
                            var outline = total - online;
                            $("#equNum").html("设备总数：<em>" + total + "</em>");
                            $("#onLineNum").html("在线设备：<em>" + online + "</em>");
                            $("#outLineNum").html("离线设备：<em>" + outline + "</em>");
                            var onlineValue = data.online.join(",");
                            $("#onlineValue").val(onlineValue);
                        } else {
                            if (data.online == undefined) {
                                if (data.total != undefined) {
                                    var outline = data.total.length;
                                    $("#outLineNum").html("离线设备：<em>" + outline + "</em>");
                                    $("#equNum").html("设备总数：<em>" + outline + "</em>");
                                }
                                $("#onlineValue").val("");
                            }
                        }
                    }
                },
                error: function (data) {
                    layer.msg("未请求到数据", {time: 1000, skin: 'layui-layer-molv', icon: 7});
                }
            });
        }

        function queryDeviceState() {
            $.ajax({
                url: '/crm/total/monitor/queryDeviceState',
                type: "POST",
                dataType: 'json',
                async: false,
                data: {},
                success: function (data) {
                    if (data.success == 1) {
                        if (data.total != undefined && data.online != undefined) {
                            var total = data.total;
                            var online = data.online;
                            var outline = total - online;
                            $("#equNum").html("设备总数：<em>" + total + "</em>");
                            $("#onLineNum").html("在线设备：<em>" + online + "</em>");
                            $("#outLineNum").html("离线设备：<em>" + outline + "</em>");
                        }
                    }
                },
                error: function (data) {
                    layer.msg("未请求到数据", {time: 1000, skin: 'layui-layer-molv', icon: 7});
                }
            });
        }

        /**
         * 分类统计
         */
        function init_echarts() {
            $.ajax({
                url: '/crm/total/monitor/nationClassRecord',
                type: "POST",
                dataType: 'json',
                async: false,
                data: {},
                success: function (data) {
                    var count = (data.count == undefined) ? 0 : data.count;
                    var countNation = (data.countNation == undefined) ? 0 : data.countNation;
                    var noNation = count - countNation;
                    var total = (data.total == undefined) ? 0 : data.total;
                    var totalNation = (data.totalNation == undefined) ? 0 : data.totalNation;
                    var noTotalNation = total - totalNation;
                    var myChart = echarts.init(document.getElementById('nation_class'));

                    option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            },
                            formatter: function (params) {
                                return params[0].name +
                                    "<br>汉族：" + params[0].value +
                                    "<br>少数民族：" + -params[1].value;
                            }
                        },
                        legend: {
                            data: ['汉族', '少数民族'],
                            textStyle: {
                                color: "#027ab7"
                            },
                            bottom: 20,
                            left: 'center',
                        },
                        grid: {
                            height: "73%",
                            left: '3%',
                            top: '0%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#027ab7'
                                }
                            },
                            splitLine: {
                                lineStyle: {
                                    color: '#055261'
                                }
                            },

                        },
                        yAxis: {
                            type: 'category',
                            data: ['常住人员', '流动人员'],
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#027ab7'
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#055261'
                                }
                            }

                        },
                        series: [
                            {
                                barWidth: 28,
                                name: '汉族',
                                type: 'bar',
                                stack: '总量',
                                itemStyle: {
                                    normal: {
                                        color: '#fb7293',
                                    }
                                },
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'inside'
                                    }
                                },
                                data: [totalNation, countNation]
                            },
                            {
                                name: '少数民族',
                                type: 'bar',
                                stack: '总量',
                                itemStyle: {
                                    normal: {
                                        color: '#8378ea',
                                    }
                                },
                                label: {
                                    normal: {
                                        show: true,
                                        formatter: function (params) {
                                            return -params.value
                                        },
                                        position: 'inside'
                                    }
                                },
                                data: [-noTotalNation, -noNation]
                            }
                        ]
                    };
                    myChart.setOption(option);
                    var list = data.list;
                    if (list != undefined) {
                        var string = '';
                        for (var i = 0; i < list.length; i++) {
                            string += '<tr onclick="goPersonVisitor(' + list[i].idNo + ')"><td width="25%" class="td_col">第' + (i + 1) + '名</td><td width="50%">' + list[i].place + '</td><td width="25%">' + list[i].total + '</td>'
                        }
                        $("#sss").html(string);
                    }
                },
                error: function (data) {
                    layer.msg("未请求到数据", {time: 1000, skin: 'layui-layer-molv', icon: 7});
                }
            });
        }

        function init_echarts1() {
            var myChart = echarts.init(document.getElementById('nation_class'));

            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function (params) {
                        return params[0].name +
                            "<br>汉族：" + params[0].value +
                            "<br>少数民族：" + -params[1].value;
                    }
                },
                legend: {
                    data: ['汉族', '少数民族'],
                    textStyle: {
                        color: "#027ab7"
                    },
                    bottom: 20,
                    left: 'center',
                },
                grid: {
                    height: "73%",
                    left: '3%',
                    top: '0%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#027ab7'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#055261'
                        }
                    },

                },
                yAxis: {
                    type: 'category',
                    data: ['常住人员', '流动人员'],
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#027ab7'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#055261'
                        }
                    }

                },
                series: [
                    {
                        barWidth: 28,
                        name: '汉族',
                        type: 'bar',
                        stack: '总量',
                        itemStyle: {
                            normal: {
                                color: '#fb7293',
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'inside'
                            }
                        },
                        data: [1527444, 4018172]
                    },
                    {
                        name: '少数民族',
                        type: 'bar',
                        stack: '总量',
                        itemStyle: {
                            normal: {
                                color: '#8378ea',
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                formatter: function (params) {
                                    return -params.value
                                },
                                position: 'inside'
                            }
                        },
                        data: [-613660, -2818111]
                    }
                ]
            };
            myChart.setOption(option);
        }

        function goPersonVisitor(idNo) {
            location.href = '/crm/account/main?ifarmUrl=dataQuery/visitLog/toList?zjh=' + idNo;
        }
    </script>
    <div class="box botm_rt">
        <div class="btm_space"></div>
        <div class="title_space">分类统计</div>
        <div class="btm_cont jrtj  qtyj">
            <div class="tab_two"><a class="a_act" href="#">民族分类</a> <a href="#">地区排名</a></div>
            <div class="art_box art_box_two" style="overflow:hidden;" id="nation_class">
                <h5><span style="width:25%">名次</span><span style="width:50%">辖区名称</span><span
                        style="width:25%">访问数量</span></h5>
                <table width="100%" border="0" class="tab_list">
                    <tbody id="sss2">
                    <tr onclick="goPersonVisitor('432427');">
                        <td class="td_col" width="25%">第1名</td>
                        <td width="50%">汉族.</td>
                        <td width="25%">302921</td>
                    </tr>
                    <tr onclick="goPersonVisitor('410381');">
                        <td class="td_col" width="25%">第2名</td>
                        <td width="50%">满族</td>
                        <td width="25%">4449</td>
                    </tr>
                    <tr onclick="goPersonVisitor('410727');">
                        <td class="td_col" width="25%">第3名</td>
                        <td width="50%">维族</td>
                        <td width="25%">68</td>
                    </tr>
                    </tbody>
                </table>



            </div>
            <div class="art_box art_box_two" style="margin-top: 0;">
                <h5><span style="width:25%">名次</span><span style="width:50%">辖区名称</span><span
                        style="width:25%">访问数量</span></h5>
                <table width="100%" border="0" class="tab_list">
                    <tbody id="sss">
                    <tr onclick="goPersonVisitor('432427');">
                        <td class="td_col" width="25%">第1名</td>
                        <td width="50%">湖南省常德市石门县.</td>
                        <td width="25%">242921</td>
                    </tr>
                    <tr onclick="goPersonVisitor('410381');">
                        <td class="td_col" width="25%">第2名</td>
                        <td width="50%">河南省洛阳市偃师市</td>
                        <td width="25%">43449</td>
                    </tr>
                    <tr onclick="goPersonVisitor('410727');">
                        <td class="td_col" width="25%">第3名</td>
                        <td width="50%">河南省新乡市封丘县</td>
                        <td width="25%">28968</td>
                    </tr>
                    </tbody>
                </table>
                <!--            <div style="height: 20px;" class="area_order">
                           </div> -->
            </div>
        </div>
        <div class="btm_space"></div>
        <div class="title_space">人员预警信息列表</div>
        <div class="btm_cont qtyj">
            <div class="cont_more"><a
                    href="/crm/account/main?ifarmUrl=dataQuery/visitLog/toList">更多&gt;&gt;</a></div>
            <div class="art_box">
                <table width="100%" border="0" class="tab_list tab_list_yj">
                    <tbody id="person_warn">
                    </tbody>
                </table>
            </div>
        </div>
        <div class="btm_space"></div>
        <div class="title_space">车辆预警信息列表</div>
        <div class="btm_cont qtyj">
            <div class="cont_more"><a
                    href="/crm/account/main?ifarmUrl=carInformation/VehicleVerificationQuery/toList">更多&gt;&gt;</a>
            </div>
            <div class="art_box">
                <table width="100%" border="0" class="tab_list tab_list_yj">
                    <tbody id="car_warn">
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script type="text/javascript" src="/js/layui.js"></script>

<script type="text/javascript">
    layui.use(['table', 'element', 'layer', 'laydate', 'util'], function () {

        var $ = layui.jquery, layer = layui.layer, element = layui.element; //独立版的layer无需执行这一句

    });
    function weekPassNum1() {
        var myChart = echarts.init(document.getElementById('week_pass'));
        var date8 = new Date();
        var date7 = new Date(date8.getTime() - 24 * 60 * 60 * 1000);
        var date6 = new Date(date8.getTime() - 48 * 60 * 60 * 1000);
        var date5 = new Date(date8.getTime() - 72 * 60 * 60 * 1000);
        var date4 = new Date(date8.getTime() - 96 * 60 * 60 * 1000);
        var date3 = new Date(date8.getTime() - 120 * 60 * 60 * 1000);
        var date2 = new Date(date8.getTime() - 144 * 60 * 60 * 1000);
        var date1 = new Date(date8.getTime() - 168 * 60 * 60 * 1000);
        var weekchartTitle = ['' + format2(date1) + '', '' + format2(date2) + '', '' + format2(date3) + '', '' + format2(date4) + '', '' + format2(date5) + '', '' + format2(date6) + '', '' + format2(date7) + ''];
        var weekchartData = [51186, 51493, 50802, 50341, 44407, 48290, 47445];
        var weekVehicleData = [36429, 37404, 35076, 38938, 34883, 36477, 34118];
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },

            grid: {
                width: "95%",
                height: "86%",
                left: '3%',
                top: "7%",
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: weekchartTitle,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#027ab7'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#055261'
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#027ab7'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#055261'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#055261'
                        }
                    }
                }
            ],
            series: [

                {
                    name: '当日进出人数',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: '#24c768',
                        }
                    },
                    data: weekchartData
                },
                {
                    name: '当日进出车辆数',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: '#00d2ff',
                        }
                    },
                    stack: '车辆',
                    data: weekVehicleData
                }
            ]
        };
        myChart.setOption(option);
    }

    /**
     * 近七日通行流量
     */
    function sevenDayTraffic() {
        let myChart = echarts.init(document.getElementById('week_pass'));
        $.ajax({
            url: '/crm/total/monitor/sevenDayTraffic',
            type: "POST",
            dataType: 'json',
            async: false,
            success: function (data) {
                let weekchartTitle = data.weekchartTitle.split(",");
                let weekchartData = data.weekchartData.split(",");
                let weekVehicleTitel = data.weekVehicleTitel.split(",");
                let weekVehicleData = data.weekVehicleData.split(",");

                option = {
                    tooltip: {trigger: 'axis', axisPointer: {type: 'shadow'}},
                    grid: {width: "95%", height: "86%", left: '3%', top: "7%", containLabel: true},
                    xAxis: [{
                        type: 'category',
                        data: weekchartTitle,
                        axisLabel: {show: true, textStyle: {color: '#027ab7'}},
                        axisLine: {lineStyle: {color: '#055261'}}
                    }],
                    yAxis: [{
                        type: 'value',
                        data: weekVehicleTitel,
                        axisLabel: {show: true, textStyle: {color: '#027ab7'}},
                        splitLine: {lineStyle: {color: '#055261'}},
                        axisLine: {lineStyle: {color: '#055261'}}
                    }],
                    series: [{
                        name: '当日进出人数',
                        type: 'bar',
                        itemStyle: {normal: {color: '#24c768',}},
                        data: weekchartData
                    }, {
                        name: '当日进出车辆数',
                        type: 'bar',
                        itemStyle: {normal: {color: '#00d2ff',}},
                        stack: '车辆',
                        data: weekVehicleData
                    }]
                };
                console.log("七日数据正在加载")
            },
            error: function (data) {
                layer.msg("未请求到数据", {time: 1000, skin: 'layui-layer-molv', icon: 7});
            }
        });

        console.log("七日数据加载完成")
        myChart.setOption(option);
    }

    /**
     * 各区历史统计数据排行
     */
    function historicalStatisticsRanking() {
        $.ajax({
            url: '/crm/total/monitor/historicalStatisticsRanking',
            type: "POST",
            dataType: 'json',
            async: false,
            data: {},
            success: function (data) {
                /*var weekchartTitle = data.weekchartTitle.split(",");
                var weekchartData = data.weekchartData.split(",");
                var weekVehicleTitel = data.weekVehicleTitel.split(",");
                var weekVehicleData = data.weekVehicleData.split(",");
                var myChart = echarts.init(document.getElementById('week_pass'));
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        width: "95%",
                        height: "86%",
                        left: '3%',
                        top: "7%",
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: weekchartTitle,
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#027ab7'
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#055261'
                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel: {
                                show: true,
                                textStyle: {color: '#027ab7'}
                            },
                            splitLine: {
                                lineStyle: {color: '#055261'}
                            },
                            axisLine: {
                                lineStyle: {color: '#055261'}
                            }
                        }
                    ],
                    series: [
                        {
                            name: '当日进出人数',
                            type: 'bar',
                            itemStyle: {
                                normal: {color: '#24c768',}
                            },
                            data: weekchartData
                        },
                        {
                            name: '当日进出车辆数',
                            type: 'bar',
                            itemStyle: {
                                normal: {color: '#00d2ff',}
                            },
                            stack: '车辆',
                            data: weekVehicleData
                        }
                    ]
                };
                myChart.setOption(option);*/
                $("#person_total").empty();
                $("#car_total").empty();
                for (var i = 0; i < data.personListTop.length; i++) {
                    var daeraName = '';
                    if (data.personListTop[i].daeraname != undefined) {
                        daeraName = data.personListTop[i].daeraname;
                    }
                    var str = '<tr>' +
                        '<td class="td_col">' + (i + 1) + '</td>' +
                        '<td width="46%">' + daeraName + '</td>' +
                        '<td width="20%">' + data.personListTop[i].num + '</td>' +
                        '<td width="20%">' + data.personListTop[i].alarms + '</td>' +
                        '</tr>';
                    $("#person_total").append(str);
                }
                for (var i = 0; i < data.vehicleListTop.length; i++) {
                    var dareaName = data.vehicleListTop[i].daeraname;
                    if (dareaName == undefined) {
                        dareaName = '';
                    }
                    var str = '<tr>' +
                        '<td class="td_col">' + (i + 1) + '</td>' +
                        '<td width="46%">' + dareaName + '</td>' +
                        '<td width="20%">' + data.vehicleListTop[i].num + '</td>' +
                        '<td width="20%">' + data.vehicleListTop[i].alarms + '</td>' +
                        '</tr>';
                    $("#car_total").append(str);
                }
            },
            error: function (data) {
                layer.msg("未请求到数据", {time: 1000, skin: 'layui-layer-molv', icon: 7});
            }
        });
    }

    //人员预警信息
    $(function () {
        personWarnList();
        carWarn();
        weekPassNum1();
        map_load();
        var username = $("#username").val();
        if (username == "test") {
            //weekPassNum1();
        } else {
            //historicalStatisticsRanking();
        }
    });

    /**
     * 人员预警信息列表
     */
    function personWarnList() {
        var date = new Date();
        var time = format(date);
        var str = '<tr>' +
            '<td><span><img src="/crm/resource/' + 123456 + '" onerror="imgerror(this);"></span></td>' +
            '<td>' + "汉族" + '</td>' +
            '<td title=' +"王先生"+'</td>' +
            '<td class="is_pass_warn" style="display:none;">' + "通过" + '</td>' +
            '<td width="36%">' + time + '</td>' +
            '</tr>';
        $("#person_warn").append(str);
        $("#person_warn").append(str);
        $("#person_warn").append(str);
        $("#person_warn").append(str);
        $("#person_warn").append(str);
        $("#person_warn").append(str);
        /*$.ajax({
            url: '/crm/person/record/ajaxWarnList',
            type: "POST",
            dataType: 'json',
            async: false,
            data: {},
            success: function (data) {
                var list = data.list;
                $("#person_warn").empty();
                for (var i = 0; i < list.length; i++) {
                    var record = list[i];
                    var name = record.yjrxm;
                    if (record.yjrxm.length > 4) {
                        name = record.yjrxm.substring(0, 4) + "...";
                    }
                    if (record.bfrdwmc.length > 6) {
                        record.bfrdwmc2 = record.bfrdwmc;
                        record.bfrdwmc = record.bfrdwmc.substring(0, 6) + "...";
                    }
                    var date = new Date(record.yjsj);
                    var time = format(date);
                    var str = '<tr>' +
                        '<td><span><img src="/crm/resource/' + record.yjstx + '" onerror="imgerror(this);"></span></td>' +
                        '<td>' + name + '</td>' +
                        '<td title=' + record.bfrdwmc2 + '>' + record.bfrdwmc + '</td>' +
                        '<td class="is_pass_warn" style="display:none;">' + record.yjsbid + '</td>' +
                        '<td width="36%">' + time + '</td>' +
                        '</tr>';
                    $("#person_warn").append(str);
                }
                $(".is_pass_warn").each(function () {
                    queryDevice(this);
                });
                $(".is_pass_warn").css("display", "");
            },
            error: function (data) {
                layer.msg("未请求到数据", {time: 1000, skin: 'layui-layer-molv', icon: 7});
            }
        });*/
    }
    function carWarn() {
        var date = new Date();
        var time = format(date);
        var str = '<tr>' +
            '<td><span><img src="/crm/resource/' + 123456 + '" onerror="imgerror(this);"></span></td>' +
            '<td>' + "鲁F123456" + '</td>' +
            '<td title=' +"鲁F123456"+'</td>' +
            '<td class="is_pass_warn" style="display:none;">' + "通过" + '</td>' +
            '<td width="36%">' + time + '</td>' +
            '</tr>';
        $("#car_warn").append(str);
        $("#car_warn").append(str);
        $("#car_warn").append(str);
        $("#car_warn").append(str);
        $("#car_warn").append(str);
        $("#car_warn").append(str);
        $("#car_warn").append(str);
        $("#car_warn").append(str);
    }


    function queryDevice(obj) {
        var snh = $(obj).html();
        $.ajax({
            url: '/crm/person/record/queryEquipment',
            type: "POST",
            dataType: 'json',
            async: false,
            data: {snh: snh},
            success: function (data) {
                var query = data.query;
                var pass = "出"
                if (query.pass != undefined && query.pass == 1) {
                    pass = "进";
                }
                $(obj).html(pass);
            },
            error: function (data) {
                layer.msg("未请求到数据", {time: 1000, skin: 'layui-layer-molv', icon: 7});
            }
        });
    }

    function format(date) {
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hour = date.getHours();
        var min = date.getMinutes();
        var sec = date.getSeconds();
        if (month < 10) month = "0" + month;
        if (day < 10) day = "0" + day;
        if (hour < 10) hour = "0" + hour;
        if (min < 10) min = "0" + min;
        if (sec < 10) sec = "0" + sec;
        return (year + '-' + month + '-' + day + " " + hour + ":" + min + ":" + sec);
    }

    function format2(date) {
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hour = date.getHours();
        var min = date.getMinutes();
        var sec = date.getSeconds();
        if (month < 10) month = "0" + month;
        if (day < 10) day = "0" + day;
        return (year + '-' + month + '-' + day);
    }

    function imgerror(obj) {
        $(obj).attr("src", "/images/lxn-man.png");
    }

    function imgerrorWoman(obj) {
        $(obj).attr("src", "/images/lxn-woman.png");
    }

    /*--------翻译参数？？？？？？？？？？？？？-------*/
    function googleTranslateElementInit() {
        new google.translate.TranslateElement({
            pageLanguage: 'zh-CN',
            autoDisplay: true,
            gaTrack: true,
            gaId: 'UA-3855518-1',
            layout: google.translate.TranslateElement.InlineLayout.SIMPLE
        }, 'google_translate_element');
        console.log("翻译参数");
    }

    var language = (navigator.browserLanguage || navigator.language).toLowerCase();
    window.onload = function () {
        if (language != 'zh-cn') {
            var a = $(".goog-te-menu-frame").contents().find(".text:eq(1)").click();
            console.log(a)
        }
        // 去掉上方谷歌的翻译框
        $(".skiptranslate").attr("style", "display:none");
    }
</script>
<div style='display:none;position:absolute;z-index:5;right:120px;height:57px; background-color:#4CAF50;text-align:right;padding-top:15px;'
     id='google_translate_element'></div>
</body>
</html>
